<template>
  <div class="page">
    <el-form :inline="true" :model="user" class="demo-form-inline">
      <el-form-item label="角色名称">
        <el-input v-model="user.username" placeholder="角色名称"></el-input>
      </el-form-item>
    </el-form>

    <h3 style="margin:20px;0px;">设置权限</h3>

    <div class="detail">
      <el-tree
        ref="tree"
        :data="rightlist"
        show-checkbox
        node-key="id"
        :default-expand-all="true"
        :props="defaultProps"
      ></el-tree>
    </div>

    <div class="bjbtn">
      <el-button @click="resetChecked">取消</el-button>
      <el-button type="primary" @click="confirm">完成</el-button>
    </div>
  </div>
</template>

<script>
import { permissionrole } from "@/api/rightsManagement.js";
export default {
  data() {
    return {
      user: {
        username: ""
      },
      rightlist: [],
      defaultProps: {
        children: "child",
        label: "name"
      }
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // let data = { name: this.formInline };
      permissionrole().then(res => {
        console.log(res);
        this.rightlist = res.rows;
      });
    },
    // 取消清空
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    },
    confirm(){
      console.log(this.$refs.tree.getCheckedNodes())
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  padding: 30px;
  .bjbtn {
    margin-top: 30px;
  }
  .detail {
    margin-left: 18px;
  }
}
/deep/.el-tree-node__label {
  font-size: 18px;
}
/deep/.el-tree-node__content {
  margin-bottom: 8px;
}
</style>
